<template>
  <view class="pages-view">
    <van-nav-bar
      class="top-nav"
      :safe-area-inset-top="true"
      :fixed="true"
      :title="title"
      :left-text="'sdsa'"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      :placeholder="true"
      :clickable="clickable"
    >
      <template #title v-if="!IsSearch">
        <view class="title">{{ title }} </view>
      </template>
      <template #title v-if="IsSearch">
        <view class="search-k">
          <van-icon
            name="search"
            size="36rpx"
            color="#86909C"
            class="search-icon"
          />
          <van-icon
            name="close"
            size="36rpx"
            color="#86909C"
            class="search-icon2"
            v-if="search"
            @click="cancelFun"
          />
          <input
            v-model="search"
            placeholder="输入名称/拼音码/条码"
            placeholder-class="input-placeholder"
            @confirm="searchFun"
          />
        </view>
      </template>
      <template #left>
        <view class="left-icon"
          ><van-icon name="arrow-left" color="#000000" size="36rpx" /><text>{{
            rType == "code" ? "新增商品" : "返回"
          }}</text></view
        >
      </template>
      <!-- <template #right v-if="rType == 'save'">
        <text class="right-icon">保存</text>
      </template> -->
      <template #right v-if="rType == 'cancel'">
        <text class="right-cancel" @click="cancelFun"> 取消 </text>
      </template>

      <template #right v-if="rType == 'code'">
        <text class="right-cancel" @click="orFun"> 切换摄像头 </text>
      </template>

      <template #right v-if="rType == 'icon'">
        <view class="right-icon-icon">
          <view @click="searchFun"
            ><van-icon name="search" size="38rpx" color="#1D2129"
          /></view>
          <view @click="scanFun">
            <van-icon name="scan" size="38rpx" color="#1D2129"
          /></view>
        </view>
      </template>
      <template #right v-if="rType == 'customize'">
        <slot name="right"></slot>
      </template>
    </van-nav-bar>
  </view>
</template>

<script setup>
import { ref, reactive, computed, watch } from "vue";
import { onShow } from "@dcloudio/uni-app";
const emit = defineEmits(["save", "search", "scan", "orcode"]);
const props = defineProps({
  title: {
    type: String,
    default: () => {
      return "标题";
    },
  },
  value: {
    type: Number,
    default: () => {
      return 0;
    },
  },
  clickable: {
    type: Boolean,
    default: () => {
      return true;
    },
  },
  rType: {
    type: String,
    default: () => {
      return " ";
    },
  },
  IsSearch: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  code: {
    type: String,
    default: () => {
      return "";
    },
  },
});
const search = ref("");
const tabbarvalue = ref(props.value);
onShow(() => {
  console.log("sadas");
  // tabbarvalue.value = props.value\
  console.log("sadas", props.code);
  search.value = props.code;
});

watch(props, (newValue, oldValue) => {
  if (newValue.value !== 1) {
    tabbarvalue.value = newValue.value;
  }
  search.value = newValue.code;
});

// const tabdate=ref(
// )
const cancelFun = () => {
  search.value = "";
  emit("search");
};
const searchFun = () => {
  if (props.rType == "cancel") {
    emit("search", search.value);
  } else {
    emit("search");
  }
};
const orFun = () => {
  emit("orcode");
};
const scanFun = () => {
  emit("scan");
};

const onClickLeft = () => {
  // showToast("按钮");
  // history.back();
  uni.navigateBack();
};
const onClickRight = () => {
  //   showToast("按钮");
  emit("save");
};
</script>

<style lang="scss" scoped>
.top-nav {
  font-size: 36rpx;
  height: 88rpx;
  ::v-deep .van-nav-bar__title {
    font-weight: bold;
    font-size: 34rpx !important;
    color: #000000;
    line-height: 48rpx;
    text-align: center;
    max-width: 80%;
    // background-color: transparent;
  }
  //   ::v-deep .van-nav-bar {
  //     background-color: transparent;
  //   }
}
.left-icon {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 30rpx;
}
.right-icon {
  font-weight: bold;
  font-size: 30rpx;
  color: #1679fb;
  line-height: 48rpx;
  text-align: right;
  font-style: normal;
  text-transform: none;
}
.right-cancel {
  font-weight: 400;
  font-size: 30rpx;
  color: #1679fb;
  line-height: 48rpx;
  text-align: right;
}

.right-icon-icon {
  display: flex;
  view {
    margin-left: 24rpx;
  }
}

.search-k {
  width: 480rpx;
  border-radius: 15rpx;
  border: 1px solid #ebedf0;
  overflow: hidden;
  height: 64rpx;
  background-color: #f2f3f5;
  //   background-color: red;
  margin-left: 34rpx;
  position: relative;
}
.search-icon {
  position: absolute;
  top: 50%;
  margin-top: -18rpx;
  left: 24rpx;
}
.search-icon2 {
  position: absolute;
  top: 50%;
  margin-top: -18rpx;
  right: 24rpx;
}
input {
  width: 480rpx;
  font-weight: 400;
  font-size: 24rpx;
  color: #1d2129;
  text-align: left;
  height: 64rpx;
  line-height: 64rpx;
  border-radius: 15rpx;
  padding-left: 64rpx;
  box-sizing: border-box;
  padding-right: 64rpx;
  //   width: 100%;
  //   height: 100%;
}
.input-placeholder {
  font-weight: 400;
  font-size: 24rpx;
  color: #86909c;
  text-align: left;
  height: 64rpx;
  line-height: 64rpx;
}
</style>
